<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>天体旋转</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .container{
            width: 500px;
            height: 500px;
            background: rgb(255, 255, 255);
            /* background-size: 100% 100%;
            border-radius: 50%; */
            position: relative;
        }
        .earth{
            width: 200px;
            height: 200px;
            background: url(../Resources/earth.jpg);
            background-size: cover;
            border-radius: 50%;
            position: absolute;
            top:50%;
            left: 50%;
            transform:translate(-50%,-50%);
        }
        .orbit{
            width: 300px;
            height: 300px;
            /* border: 2px dashed red; */
            border: none;
            position: absolute;
            top:100px;
            left: 100px;
            border-radius: 50%;
            animation: spin 12s linear infinite;
        }
        @keyframes spin {
            100%{
                transform: rotate(360deg);
            }
        }
        .orbit::after{
            content: '';
            display: block;
            position: absolute;
            width: 50px;
            height: 50px;
            top:10px;
            left:10px;
            /* margin-left: -100px; */
            background:url(../Resources/ikun.gif) center/cover;
            background-size: cover;
            mix-blend-mode: multiply;
            filter: contrast(3);
            animation: spin2 12s linear infinite;
        }
        @keyframes spin2 {
            100%{
                transform: rotate(-360deg);
            }
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="earth">
            
        </div>
        <div class="orbit">

        </div>
    </div>
    
</body>

</html>